<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>抽奖转盘</title>
		<script src="js/jquery-3.6.0.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				overflow: hidden;
			}

			.main {
				width: 500px;
				height: 500px;
				background-color: #ff8181;
				border-radius: 50%;
				/* overflow: hidden; */
				position: relative;
				margin: 50px auto 0;
				box-shadow: 1px 1px 5px 2px #999;
			}

			.cj-disc {
				width: 460px;
				height: 460px;
				border-radius: 50%;
				border: 10px dotted #ffec89;
				position: absolute;
				top: 10px;
				left: 10px;
				transform: rotate(90deg);
				transition-timing-function: cubic-bezier(0.5, 0.2, 0, 1);
			}

			.cj-disc .list {
				width: 440px;
				height: 440px;
				border-radius: 50%;
				position: absolute;
				left: 10px;
				top: 10px;
				/* background-color: #007bff; */
				overflow: hidden;
				box-shadow: 0 0 3px 1px #333;
			}

			.cj-disc .center {
				width: 0px;
				height: 0px;
				position: absolute;
				left: 220px;
				top: 220px;
			}

			.cj-disc .list .item {
				position: absolute;
				width: 0px;
				height: 0px;
				top: -220px;
				border-color: transparent;
				border-style: solid;
				border-width: 220px;

				/* transform-origin: 0px 0px; */
				/* transform: rotate(5deg); */

			}

			.item:nth-child(odd) {
				border-top-color: #ff814f !important;
			}

			.item:nth-child(even) {
				border-top-color: #ffec89 !important;
			}

			.item p {
				position: absolute;
				top: -215px;
				line-height: 17px;
				font-size: 16px;
				left: -7.5px;
			}

			.pointer {
				width: 60px;
				height: 60px;
				position: absolute;
				border-radius: 50%;
				top: 220px;
				left: 220px;
				z-index: 1;
				background-color: #ff5959;
				box-shadow: 0 3px 5px 1px #333;
			}

			.before {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				border-radius: 50%;
				background-color: #ff5959;
				text-align: center;
				cursor: pointer;

			}

			.before:hover p {

				text-shadow: 0 0 10px #ffec89;
			}

			.before p {
				cursor: pointer;
				line-height: 16px;
				color: #ffec89;
			}

			.before p:nth-child(1) {
				margin-top: 13px;
			}

			.pointer .line {
				width: 120px;
				position: relative;
				height: 10px;
				background-color: #ff5959;
				margin-top: 25px;
				margin-left: 50px;
				box-shadow: 0 3px 5px 1px #333;
			}

			.line-before {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				background-color: #ff5959;

			}

			.arrow {
				width: 0;
				height: 0;
				position: absolute;
				right: -30px;
				top: -10px;
				color: #ff5959;
				font-size: 30px;
				transform: rotate(90deg);
				text-shadow: 3px 0px 5px #333;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="cj-disc">
				<div class="list">
					<div class="center">
					</div>
				</div>

			</div>
			<div class="pointer">
				<div class="before">
					<p>开始</p>
					<p>摇奖</p>
				</div>
				<div class="line">
					<div class="line-before"></div>
					<div class="arrow">▲</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		var conArr = [ //奖项+概率
			['0等奖', 50],
			['1等奖', 150],
			['2等奖', 300],
			['3等奖', 500],
			['4等奖', 700],
			['5等奖', 800],
			['6等奖', 1000],
			['7等奖', 1500],
			['8等奖', 2000],
			['9等奖', 3000]
		];
		var maxNum = 0; //概率总数,添加元素时自动计算
		var count = conArr.length;
		var jiao = 360 / count;
		var bxj = 220;
		var bc = bxj * (Math.tan(Math.PI / 180 * jiao / 2)); //求边长


		function grn(n, m) {
			var c = m - n + 1;
			return Math.floor(Math.random() * c + n);
		}
		$(function() {
			function createItem(c) {
				for (var i = 0; i < c; i++) {
					maxNum += conArr[i][1];
					var item = $('<div class="item"><p>' + conArr[i][0] + '</p></div>');
					$('.center').append(item)
					item.css({
						"transform": 'rotate(' + jiao * i + 'deg)',
						'left': -bc + 'px'
					});
					item.css('border-left-width', (bc) + 'px');
					item.css('border-right-width', (bc) + 'px');
				}
			}
			createItem(count);
			$('.before').on('click', function() {
				$('.cj-disc').css({
					'transition-duration': '0s',
					'transform': 'rotate(90deg)'
				})
				var zCount = grn(5, 8);
				var b = grn(1, maxNum);
				var temp1 = 0,
					temp2 = 0;
				var conIndex = 0;
				for (var i = 0; i < count; i++) {
					temp2 = temp1;
					temp1 += conArr[i][1];

					if (i == 0) {
						if (b <= temp1) {
							conIndex = i;
							break;
						}
					} else {
						if (b > temp2 && b <= temp1) {
							conIndex = i;
							break;
						}
					}

				}
				var rotate = grn((count - conIndex) * jiao - jiao / 2 + 1, (count - conIndex) * jiao + jiao /
					2 -
					1); //旋转角度区间


				console.log(conArr[conIndex][0] + '    ' + conIndex + "    " + rotate);
				setTimeout(function() {
					$('.cj-disc').css({
						'transition-duration': zCount + 2 + 's',
						'transform': 'rotate(' + (90 + (360 * zCount + rotate)) + 'deg)',
					})
				}, 100)


			})
		})
	</script>
</html>
